<template>
	<div>
		<el-row :gutter="20" v-permission="['getStatistics1,GET']">
			<template v-if="panels.length == 0">
				<el-col :span="6" :offset="0" v-for="i in 4" :key="i">
					<el-skeleton style="width: 100%" animated loading>
						<template #template>
							<el-card shadow="hover" class="border-0">
								<template #header>
									<div class="flex justify-between">
										<el-skeleton-item variant="text" style="width: 50%" />
										<el-skeleton-item variant="text" style="width: 10%" />
									</div>
								</template>
								<el-skeleton-item variant="h3" style="width: 80%" />
								<el-divider />
								<div class="flex justify-between text-sm text-gray-500">
									<el-skeleton-item variant="text" style="width: 50%" />
									<el-skeleton-item variant="text" style="width: 10%" />
								</div>
							</el-card>
						</template>
					</el-skeleton>
				</el-col>
			</template>
			<el-col :span="6" :offset="0" v-for="(item,index) in panels" :key="index">
				<el-card shadow="hover" class="border-0">
					<template #header>
						<div class="flex justify-between">
							<span class="text-sm">{{ item.title }}</span>
							<el-tag :type="item.unitColor" effect="plain">
								{{ item.unit}}
							</el-tag>
						</div>
					</template>
					<span class="text-3x1 font-bold text-gray-500">
						<CountTo :value="item.value" />
					</span>
					<el-divider />
					<div class="flex justify-between text-sm text-gray-500">
						<span>{{ item.subTitle }}</span>
						<span>{{ item.subValue }}</span>
					</div>
				</el-card>

			</el-col>
		</el-row>
		后台首页
<!-- 		{{ $store.state.user }}
		<el-button @click="handleLogout">退出登录</el-button>
		<el-button @click="addCount">{{ count }}</el-button>
		<el-button type="primary" @click="addCount2">{{ form.count }}</el-button> -->
		<IndexNavs />
		<el-row :gutter="20" class="mt-5">
			<el-col :span="12" :offset="0">
				<IndexChart v-permission="['getStatistics3,GET']" />
			</el-col>
			<el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
				<IndexCard title="店铺及商品提示" tip="店铺及商品提示" :btns="goods" class="mb-3" />
				<IndexCard title="交易提示" tip="需要立即处理的订单" :btns="order" />
			</el-col>
		</el-row>

	</div>
</template>

<script setup>
	import CountTo from "~/components/CountTo.vue";
	import IndexNavs from "~/components/IndexNavs.vue";
	import IndexChart from "~/components/IndexChart.vue";
	import IndexCard from "~/components/IndexCard.vue";
	import {
		ref,
		reactive
	} from "vue"
	import {
		getStatistics1,
		getStatistics2
	} from "~/api/index.js"

	const panels = ref([])
	getStatistics1()
		.then(res => {
			panels.value = res.panels
			//console.log(repanels.value);
		})
	const goods = ref([])
	const order = ref([])
	getStatistics2().then(res => {
		goods.value = res.goods
		order.value = res.order
	})

	let count = ref(1)

	function addCount() {
		console.log("addCount");
		count.value++
		console.log(count.value);
	}

	import {
		showModal,
		toast
	} from "~/composables/util"
	import {
		logout
	} from "~/api/manager"
	import {
		useRouter
	} from "vue-router"
	import {
		useStore
	} from "vuex"

	const router = useRouter()
	const store = useStore()

	function handleLogout() {
		showModal("是否要退出登录？").then(res => {
			logout()
				.finally(() => {
					store.dispatch("logout")
					//跳转回登录页
					router.push("/login")
					//提示退出登录成功
					toast("退出登录成功")

				})
		})
	}
</script>